<template>
    <ScaleView :width="1920" :height="1080" ref="container">
        <img class="decorator" src="./assets/bg.svg" alt="">
        <Header @switch-fullscreen="switchFullscreen" @select:village="villageChanged"></Header>
        <slot v-if="reloadFlag"></slot>
        <Footer></Footer>
    </ScaleView>
</template>

<script setup lang="ts">
import { nextTick, provide, ref } from "vue";
import ScaleView from "../../shared/ScaleView.vue";
import Header from "./Header.vue";
import Footer from "./Footer.vue";

const villageId = ref('')
const reloadFlag = ref(false)
const container = ref<InstanceType<typeof ScaleView>>()
provide('villageId', villageId)

function switchFullscreen() {
    if (!document.fullscreenEnabled) {
        return alert('您的浏览器不支持或禁用了全屏功能')
    } else if (document.fullscreenElement) {
        document.exitFullscreen()
    } else {
        container.value?.$el.requestFullscreen()
    }
}
function villageChanged(village: any) {
    villageId.value = village.villageId
    reloadFlag.value = false
    nextTick(() => reloadFlag.value = true)
}

</script>

<style scoped>
.decorator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

 .scale-view  > :deep .content {
    background: #02050E;
}
</style>